<template>
  <div style="margin-top: 20px">
    <canvas
      ref="canvasRef"
      :style="{
        width: 180 + 'px',
        height: 100 + 'px',
      }"
    ></canvas>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import {
  onMounted,
  PropType,
  toRefs,
  watch,
  onBeforeUnmount,
  ref,
  toRaw,
  watchEffect,
} from "vue";
// import request from "../../../../../api/axios";
// import { CreateComponentType } from "@/packages/index.d";
// import { useChartDataFetch } from "@/hooks";
// import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
// import { customizeHttp } from "@/api/http";
import { useRoute } from "vue-router";
// import { Json } from "@vicons/carbon";
// const chartEditStore = useChartEditStore();
const props = defineProps({
  rtsp: {
    type: String,
    // default: () => "rtsp://admin:123456@10.10.100.127:554/stream1",
    default: () => "rtmp://58.200.131.2:1935/livetv/cctv15",
  },
});
const canvasRef = ref();
// 全局数据
// const {
//   requestOriginUrl,
//   requestIntervalUnit: globalUnit,
//   requestInterval: globalRequestInterval,
// } = toRefs(chartEditStore.getRequestGlobalConfig);
// const route = useRoute();
// const canvasRef = ref();
// const props = defineProps({
//   chartConfig: {
//     type: Object as PropType<CreateComponentType>,
//     required: true,
//   },
// });

// const { w, h } = toRefs(props.chartConfig.attr);
// const { dataset } = toRefs(props.chartConfig.option);
// const queryData = ref();
// watch(
//   () => dataset,
//   (val) => {
//     console.log({ val });

//     // videoInit()
//   }, {
//   immediate: true
// }
// )
// watch(
//   () => route.query,
//   (val) => {
//     console.log({ val });
//     queryData.value = val;
//   },
//   { immediate: true }
// );

function videoInit(val) {
  // @ts-ignore
  new JSMpeg.Player("ws://10.10.100.101:9999/rtsp?url=" + btoa(val), {
    canvas: canvasRef.value,
  });
}

onMounted(async () => {
  // let configData = JSON.parse(JSON.stringify(props.chartConfig?.request));
  // configData.requestParams.Params = {
  //   projectId: "804131820835835904",
  //   correlationType: "5",
  //   correlationId: queryData.value.correlationId,
  // };
  // let res = await customizeHttp(
  //   toRaw(configData),
  //   toRaw(chartEditStore.requestGlobalConfig)
  // );
  // let a = new Function('data', props.chartConfig.filter)
  // console.log({ res }, a(res?.data))
  // var rtsp = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
  // let rtsp = 'rtsp://admin:123456@10.10.100.127:554/stream1'
  // var rtsp = 'rtsp://10.10.100.69:8999'
  /**
  @param port	转码推流服务占用的端口号；（type：Number）
  可以不传；默认值：9999
  @param path	FFmpeg 命令在你机器上的启动名称，(type: String)
  一般情况下不传；默认值：‘ffmpeg’
  @param audio	默认可以不传，有声音；默认值：true；即：输出音频。
  audio: false - 禁止输出音频
  @param freeTime	任一视频流空闲(未被使用)时间超过这个值，就会停止该视频流的转码，释放机器资源（type: Number；单位：秒）
  一般情况下不传；默认值：60
  @param checkTime	检测视频空闲的时间间隔（type: Number；单位：秒）
  一般情况下不传；默认值：10
  @param q	视频质量；取值范围：0-1000；数字越小，视频越清晰，带宽消耗越大
  默认值：1；
  @param transportType	设置 RTSP 传输协议、默认值：tcp
  可选值：[‘tcp’, ‘udp’, ‘udp_multicast’, ‘http’, ‘https’]
  */
  // 将rtsp视频流地址进行btoa处理一下
  // videoInit(res?.data.sp[2].monitorUrl);
  // videoInit("rtsp://admin:123456@10.10.100.127:554/stream1");
});
// useChartDataFetch(props.chartConfig, useChartEditStore, videoInit)
</script>

<style lang="scss" scoped></style>
